<template>
  <div class="login">
    <div class="relative">
      <div class="left">
        <el-row>
          <el-col :span="24">
            <div class="homepageLogo">
              <ul>
                <li>
                  <el-image style="width: 50px; height: 50px" :src="url" fit="fit" />
                </li>
                <li>
                  <span>西安诚合自动化</span>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-image class="url"  :src="boxbg" fit="fit" />
            <p class="p1">欢迎使用本系统</p>
            <p class="p2">AGV调度系统</p>
          </el-col>
        </el-row>
      </div>
      
      <div class="right">
        <el-row>
          <el-col :span="24">
            <h2>登录</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form 
              :model="form" 
              :rules="rules" 
              ref="ruleFormRef"
              label-width="120px" 
              label-position="top" 
              size="large" 
              class="form"
            >
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="form.userName" />
              </el-form-item>
              <el-form-item label="密码" prop="passWord">
                <el-input v-model="form.passWord" type="password" show-password />
              </el-form-item>
              <el-form-item>
                <el-button class="submitBtn" type="primary" @click="onSubmit()">登录</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { FormRules } from 'element-plus';
import  { reactive, ref } from "vue";
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
const url = ref('/images/西安诚合自动化Icon.png')
const boxbg = ref('/images/login.png')

const form = reactive({
  userName: '',
  passWord: ''
})

//验证
const rules = reactive<FormRules>({
userName: [{ required: true, message: "请输入用户名", trigger: 'blur' }],   //用户名
    passWord: [{ required: true, message: "请输入密码", trigger: 'blur' }]   //密码
})
const ruleFormRef = ref<FormInstance>(); // 全局定义表单引用

const onSubmit = async () => {
  try {
    await ruleFormRef.value?.validate(); // 执行表单验证
    console.log("正在登录...", form);
    
    // 这里添加实际登录API调用
    // const res = await loginApi(form);
    // if (res.success) {
    //   ElMessage.success('登录成功');
    //   router.push('/dashboard');
    // }
  } catch (error: any) {
      console.log("校验不通过！", error);
      
      let errors = "";
      // 直接从 error 对象中获取错误信息
    if (error.userName && error.userName.length > 0) {
      errors += error.userName[0].message + " ";
    }
    
    if (error.passWord && error.passWord.length > 0) {
      errors += error.passWord[0].message + " ";
    }
    
    console.log("拼接后的错误信息:", errors);
    
      ElMessage({
        type: "warning",
        message: errors.trim()
      });
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  
  .relative {
    width: 100%;
    height: 100%;
    text-align: center;
    
    .left {
      width: 50%;
      height: 100%;
      float: left;
      background-color:rgb(123, 135, 110);
      
      .boxbg {
        width: 50%;
        height: 350px;
        margin-top: 100px;
      }
      
      .homepageLogo {
        height: 50px;
        line-height: 50px;
        margin-top: 40px;
        
        span {
          color: white;
          font-size: 24px;
        }
        
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          li {
            float: left;
            margin-left: 5px;
          }
        }
      }
      
      p {
        color: white;
      }
      
      .p1 {
        font-size: 1.875rem;
        line-height: 2.25rem;
      }
      
      .p2 {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }
    
    .right {
      width: 50%;
      float: left;
      padding-top: 15%;
      
      .form {
        width: 50%;
        margin: 0px auto;
        
        .submitBtn {
          width: 100%;
        }
      }
    }
  }
}
</style>